<template>
  <!--  在默认情况下，标签内都自动提交给默认插槽   -->
  <div>
    <div class="container">
      <header>
        <!-- 标题内容放这里 -->
        <slot name="header"></slot>
      </header>
      <hr />
      <main>
        <!-- 主要内容放这里 -->
        <slot></slot>
        <br />
        <slot></slot>
      </main>
      <hr />
      <footer>
        <!-- 底部内容放这里 -->
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
</script>
